<template>
    <Card>
        <Bar :config="option" />
    </Card>
</template>

<script setup>
import {ref} from 'vue';
import _ from 'lodash';

import Bar from '../components/Bar.vue';
import Card from '../components/Card.vue';

const arr = new Array(7).fill(0);

const tooltip = {
    valueFormatter: function (value) {
        return value + ' 元';
    },
};

const option = ref({
    color: [
        ['#51C1F1', '#067AFF'],
        ['#84F8AA', '#29D0F1'],
    ],
    title: {
        text: '2023年6月与2022年6月的收入对比',
    },
    tooltip: {
        trigger: 'axis',
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: arr.map((i, idx) => `${idx + 1}日`),
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} 元',
        },
    },
    series: [
        {
            name: '2023年6月',
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'},
                ],
                label: {
                    color: '#fff',
                },
            },
            tooltip,
            markLine: {
                data: [{type: 'average', name: '平均线'}],
            },
        },
        {
            name: '2022年6月',
            type: 'line',
            data: [1, 2, 2, 5, 3, 2, 0],
            tooltip,
            markPoint: {
                label: {
                    color: '#fff',
                },
                data: [
                    {type: 'max', name: 'Max'},
                    {type: 'min', name: 'Min'},
                ],
            },
            markLine: {
                data: [{type: 'average', name: '平均线'}],
            },
        },
    ],
});
</script>

<style scoped></style>
